<template>
  <el-select-v2
    v-model="value"
    style="width: 100%"
    :multiple="props.limit == 1 ? false : true"
    :multiple-limit="props.limit"
    filterable
    remote
    :remote-method="remoteMethod"
    clearable
    :options="options"
  />
</template>
<script lang="ts" setup name="Role">
import { ref, watch, onBeforeMount } from "vue";
import { roleList } from "@/api/modules/system.ts";

const props = defineProps({
  modelValue: {
    type: Number
  },
  limit: {
    type: Number,
    default: 1
  }
});

const value = ref([]);
watch(
  () => props.modelValue,
  newValue => {
    value.value = newValue;
  }
);

const emits = defineEmits(["update:modelValue"]);
watch(value, newValue => {
  emits("update:modelValue", newValue);
});

const options = ref([]);
const remoteMethod = (name?: string) => {
  const is_good = 1;
  roleList({ name, is_good }).then(response => {
    options.value = [];
    response.data.list.forEach(item => {
      options.value.push({
        label: item.name,
        value: item.id
      });
    });
  });
};

onBeforeMount(() => {
  remoteMethod();
});
</script>
0
